import Image from "next/image";
import { type WhatItem } from "@/base-framework/types/landing";

export default function What({ items }: { items: WhatItem[] }) {
  if (!items?.length) return null;
  return (
    <section id="what" aria-labelledby="what-title" className="w-full">
      <div className="mx-auto max-w-screen-xl px-6 py-16">
        <h2 id="what-title" className="text-2xl md:text-3xl font-semibold mb-8">
          Core Value
        </h2>
        <ul role="list" className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
          {items.map((it, i) => (
            <li key={i} className="rounded-xl border border-black/10 dark:border-white/15 p-5">
              <div className="flex items-start gap-3">
                {it.icon && (
                  <div className="relative w-full h-auto" style={{ maxWidth: 24, aspectRatio: "auto" }}>
                    <Image
                      src={it.icon}
                      alt=""
                      aria-hidden
                      width={24}
                      height={24}
                      className="w-full h-auto"
                      style={{ width: "100%", height: "auto" }}
                    />
                  </div>
                )}
                <div>
                  <h3 className="text-lg font-medium">{it.title}</h3>
                  <p className="text-foreground/80 text-sm">{it.desc}</p>
                  {it.metric && (
                    <p className="mt-2 text-foreground/70 text-xs">{it.metric}</p>
                  )}
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
